youtube
Let's explore new typography features in p5.js 2.0! In this video, I cover how to work with variable fonts, convert text to 3D models with textModel(), extract contours with textContours(), and control the detail of your typography with sampleFactor and simplifyThreshold. Code:
🚀 Watch this video ad-free on Nebula
p5.js Web Editor Sketches:
🕹️ Variable Font Weights:
🕹️ textContours():
🕹️ textModel() - 3D Text:
🕹️ Coding Challenge 59 - p5.js 2.0:
🕹️ One Letter, Two Contours:
🕹️ sampleFactor Diagram:
🕹️ simplifyThreshold Demo:
🎥 Previous:
🎥 Next:
References:
📖 p5.js 2.0: You Are Here & How to Contribute!:
🔤 Google Fonts:
🐞 Typography questions and possible bugs (Issue #8177):
🐞 Reference errors: textToContours() and textToModel() (Issue #8623):
📖 loadFont() Reference:
📖 textWeight() Reference:
📖 textContours() Reference:
📖 textModel() Reference:
Videos:
🎥
🚂
🚂
🚂
🎯
Related Coding Challenges:
🚂
Timestamps:
0:00 Welcome!
0:49 Finding Fonts (Google Fonts)
1:01 Loading Fonts with Async/Await
2:30 Variable Fonts
3:17 textWeight()
4:03 Animated Text Weight
4:31 Coding Challenge 59 - Steering Behaviors
5:15 textContours() Introduction
6:00 sampleFactor and simplifyThreshold
9:00 sampleFactor Explained
12:00 simplifyThreshold Explained
14:00 Updating Challenge 59 to p5.js 2.0
15:00 Angle Property of Contours
17:00 textModel() for 3D Text
19:00 Extrude Option
20:11 Goodbye!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
|
2026/03/30
youtube
